<template>
	<el-table
	 :data="lanMuLieBiao"
	 style="width: 100%"
	 :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
	 row-key="lHao">
		<el-table-column prop="lHao" label="栏目编号" width="80" align="center">
		</el-table-column>
		<el-table-column prop="biaoTi" label="栏目名称">
		</el-table-column>
		<el-table-column prop="muBan" label="栏目模板" width="180" align="center">
		</el-table-column>
		<el-table-column label="操作" width='150' align="center">
			<template #default="scope">
				<el-button type="info" size="mini" title="查看" @click="yuLanYeMian(scope.row.lHao)" icon="el-icon-view"
					circle></el-button>
				<el-button type="primary" size="mini" title="编辑" @click="bianJiLanMu(scope.row)" icon="el-icon-edit"
					circle></el-button>
				<el-button size="mini" type="danger" title="删除" @click="shanChuLanMu(scope.row.lHao)" icon="el-icon-delete"
				 circle ></el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog title="修改栏目" v-model="xiuGaiKuangXianShi" width=70% destroy-on-close center>
		<zeng-lan-mu @guanBiTanChuang="xiuGaiKuangXianShi = false" @shuaXin="xiuGaiWanCheng"></zeng-lan-mu>
	</el-dialog>
	<el-dialog title="提示" v-model="shanChuKuangXianShi" width=30% destroy-on-close center>
		<span>删除栏目{{shanChuHangHao}}？</span>
		  <template #footer>
		    <span>
		      <el-button @click="shanChuKuangXianShi = false">取 消</el-button>
		      <el-button type="primary" @click="queRenShanChu(shanChuHangHao)">确定</el-button>
		    </span>
		  </template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		provide,
		inject
	} from 'vue';
	import zengLanMu from './zengLanMu.vue';
	export default {
		setup() {
			let lanMuLieBiao = reactive([]);
			let hang = reactive([]);
			let xiuGaiKuangXianShi = ref();
			let shanChuKuangXianShi = ref();
			let shanChuHangHao = ref();
			xiuGaiKuangXianShi.value = false;
			shanChuKuangXianShi.value = false;
			shanChuHangHao.value = '';
			let zhuJiDiZhi = inject('zhuJiDiZhi');
			let lanMuShuJu = async () => {
				await fetch(zhuJiDiZhi + 'sytht/jieKou/chaLanMu', {
						method: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.json();
					})
					.then(function(json) {
						lanMuLieBiao.splice(0,)
						json.forEach((v, i, arr) => {
							arr.forEach(x => {
								if (v.fHao != 0 && x.lHao == v.fHao) {
									x.children ? x.children : x.children = [];
									x.children.push(v);
									v.chongFu = true;
								}
							})
						})
						Object.assign(lanMuLieBiao, json.filter( x => !x.chongFu))
					})
			}
			onMounted(() => {
				lanMuShuJu()
			});
			const xiuGaiWanCheng = () => {
				lanMuShuJu()
			}
			provide('hang', hang);
			const bianJiLanMu = (r) => {
				Object.assign(hang, r);
				xiuGaiKuangXianShi.value = true;
			};
			return {
				xiuGaiKuangXianShi,
				shanChuKuangXianShi,
				shanChuHangHao,
				lanMuLieBiao,
				bianJiLanMu,
				zhuJiDiZhi,
				xiuGaiWanCheng,
				lanMuShuJu
			}
		},
		components: {
			zengLanMu: zengLanMu
		},
		methods: {
			yuLanYeMian(lHao) {
				open(this.zhuJiDiZhi + 'lanMu-' + lHao)
			},
			shanChuLanMu(lHao) {
				this.shanChuHangHao = lHao;
				this.shanChuKuangXianShi = true
			},
			async queRenShanChu(lHao) {
				this.shanChuKuangXianShi = false;
				await fetch(this.zhuJiDiZhi + 'sytht/jieKou/shanLanMu?lHao=' + lHao, {
						method: 'get',
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.text();
					})
					.then(function(a) {
						if (a.includes('登录页面')) {
							alert('请登录');
						};
						console.log(a);
					});
				this.lanMuShuJu()
			}
		}
	}
</script>
<style scoped>
	.el-table {
		height: 90%;
		overflow: auto;
	}
</style>
